<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线路产品管理 - CRM旅游管理系统</title>
    
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Apple Design 样式 -->
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    
    <!-- 模块样式 -->
    <link rel="stylesheet" href="../styles/product-management.css">
    <link rel="stylesheet" href="../styles/pricing-modal.css">
    <link rel="stylesheet" href="../styles/inventory-modal.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-route"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">产品管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">线路产品管理</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" title="通知">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <button class="nav-button" title="设置">
                    <i class="fas fa-cog"></i>
                </button>
                <div class="user-menu">
                    <img src="../../../shared/assets/user-avatar.png" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h6 class="sidebar-title">产品管理</h6>
                <ul class="sidebar-menu">
                    <li class="menu-item active">
                        <a href="#" class="menu-link">
                            <i class="fas fa-route"></i>
                            <span>线路产品管理</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-tags"></i>
                            <span>产品分类管理</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-image"></i>
                            <span>产品资料管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h6 class="sidebar-title">销售支持</h6>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-thumbs-up"></i>
                            <span>产品推荐</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-chart-line"></i>
                            <span>销售分析</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
        <div class="content-container">
            <!-- 页面头部 -->
            <header class="page-header">
                <div class="header-left">
                    <h1 class="page-title">线路产品管理</h1>
                    <p class="page-subtitle">管理旅游线路产品信息、价格和库存</p>
                </div>
                <div class="header-right">
                    <button class="btn btn-outline btn-small" onclick="exportProducts()">
                        <i class="fas fa-download"></i>
                        导出产品
                    </button>
                    <button class="btn btn-primary" onclick="openCreateProductModal()">
                        <i class="fas fa-plus"></i>
                        新增产品
                    </button>
                </div>
            </header>

            <!-- 统计概览 -->
            <section class="stats-overview">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-route"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">156</div>
                            <div class="stat-label">总产品数</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon success">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">128</div>
                            <div class="stat-label">正常销售</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon warning">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">15</div>
                            <div class="stat-label">库存预警</div>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon danger">
                            <i class="fas fa-times-circle"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-number">8</div>
                            <div class="stat-label">已售罄</div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 筛选和搜索工具栏 -->
            <section class="toolbar">
                <div class="search-container">
                    <div class="search-input-wrapper">
                        <i class="fas fa-search search-icon"></i>
                        <input type="text" class="form-input search-input" placeholder="搜索产品名称、编号或目的地...">
                    </div>
                </div>
                
                <div class="filters-container">
                    <select class="form-select filter-select" id="categoryFilter">
                        <option value="">全部分类</option>
                        <option value="domestic">国内游</option>
                        <option value="outbound">出境游</option>
                        <option value="surrounding">周边游</option>
                        <option value="custom">定制游</option>
                    </select>
                    
                    <select class="form-select filter-select" id="statusFilter">
                        <option value="">全部状态</option>
                        <option value="active">正常销售</option>
                        <option value="paused">暂停销售</option>
                        <option value="coming">即将上线</option>
                        <option value="discontinued">已下架</option>
                        <option value="seasonal">季节性暂停</option>
                    </select>
                    
                    <select class="form-select filter-select" id="sortFilter">
                        <option value="created_desc">创建时间↓</option>
                        <option value="created_asc">创建时间↑</option>
                        <option value="sales_desc">销量↓</option>
                        <option value="sales_asc">销量↑</option>
                        <option value="price_desc">价格↓</option>
                        <option value="price_asc">价格↑</option>
                    </select>
                    
                    <button class="btn btn-outline btn-small" onclick="resetFilters()">
                        <i class="fas fa-undo"></i>
                        重置筛选
                    </button>
                </div>
            </section>

            <!-- 产品列表 -->
            <section class="product-list-section">
                <div class="product-table-container">
                    <table class="product-table">
                        <thead>
                            <tr>
                                <th class="col-checkbox">
                                    <input type="checkbox" class="form-checkbox" id="selectAll">
                                </th>
                                <th class="col-image">图片</th>
                                <th class="col-info">产品信息</th>
                                <th class="col-category">分类</th>
                                <th class="col-price">价格</th>
                                <th class="col-inventory">库存</th>
                                <th class="col-status">状态</th>
                                <th class="col-sales">销量</th>
                                <th class="col-actions">操作</th>
                            </tr>
                        </thead>
                        <tbody id="productTableBody">
                            <!-- 产品行将通过JavaScript动态生成 -->
                            <tr class="product-row">
                                <td>
                                    <input type="checkbox" class="form-checkbox product-checkbox" value="PRD202501001">
                                </td>
                                <td class="product-image">
                                    <img src="../../../shared/assets/product-sample.jpg" alt="产品图片" class="product-thumb">
                                </td>
                                <td class="product-info">
                                    <div class="product-name">桂林山水精品3日游</div>
                                    <div class="product-code">PRD202501001</div>
                                    <div class="product-subtitle">漓江竹筏+象鼻山+银子岩</div>
                                </td>
                                <td class="product-category">
                                    <span class="category-badge primary">国内游</span>
                                    <div class="category-detail">华南线 / 广西</div>
                                </td>
                                <td class="product-price">
                                    <div class="price-main">¥1,280</div>
                                    <div class="price-detail">成人价</div>
                                </td>
                                <td class="product-inventory">
                                    <div class="inventory-info">
                                        <span class="inventory-number">28</span>
                                        <div class="inventory-progress">
                                            <div class="progress-bar">
                                                <div class="progress-fill" style="width: 70%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="product-status">
                                    <span class="status-badge active">正常销售</span>
                                </td>
                                <td class="product-sales">
                                    <div class="sales-number">156人</div>
                                    <div class="sales-trend positive">+12%</div>
                                </td>
                                <td class="product-actions">
                                    <div class="action-buttons">
                                        <button class="btn-icon" title="查看详情" onclick="viewProduct('PRD202501001')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn-icon" title="编辑产品" onclick="editProduct('PRD202501001')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn-icon" title="价格管理" onclick="openPricingModal('PRD202501001')">
                                            <i class="fas fa-dollar-sign"></i>
                                        </button>
                                        <button class="btn-icon" title="库存管理" onclick="openInventoryModal('PRD202501001')">
                                            <i class="fas fa-boxes"></i>
                                        </button>
                                        <div class="dropdown">
                                            <button class="btn-icon dropdown-toggle" title="更多操作">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a href="#" class="dropdown-item">复制产品</a>
                                                <a href="#" class="dropdown-item">产品推荐</a>
                                                <a href="#" class="dropdown-item">销售报告</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="#" class="dropdown-item text-red">删除产品</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            
                            <!-- 更多产品行示例 -->
                            <tr class="product-row">
                                <td>
                                    <input type="checkbox" class="form-checkbox product-checkbox" value="PRD202501002">
                                </td>
                                <td class="product-image">
                                    <img src="../../../shared/assets/product-sample.jpg" alt="产品图片" class="product-thumb">
                                </td>
                                <td class="product-info">
                                    <div class="product-name">云南大理丽江5日游</div>
                                    <div class="product-code">PRD202501002</div>
                                    <div class="product-subtitle">大理古城+丽江古城+玉龙雪山</div>
                                </td>
                                <td class="product-category">
                                    <span class="category-badge primary">国内游</span>
                                    <div class="category-detail">西南线 / 云南</div>
                                </td>
                                <td class="product-price">
                                    <div class="price-main">¥2,580</div>
                                    <div class="price-detail">成人价</div>
                                </td>
                                <td class="product-inventory">
                                    <div class="inventory-info">
                                        <span class="inventory-number warning">8</span>
                                        <div class="inventory-progress">
                                            <div class="progress-bar">
                                                <div class="progress-fill warning" style="width: 20%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="product-status">
                                    <span class="status-badge warning">库存紧张</span>
                                </td>
                                <td class="product-sales">
                                    <div class="sales-number">89人</div>
                                    <div class="sales-trend negative">-5%</div>
                                </td>
                                <td class="product-actions">
                                    <div class="action-buttons">
                                        <button class="btn-icon" title="查看详情" onclick="viewProduct('PRD202501002')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn-icon" title="编辑产品" onclick="editProduct('PRD202501002')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn-icon" title="价格管理" onclick="openPricingModal('PRD202501002')">
                                            <i class="fas fa-dollar-sign"></i>
                                        </button>
                                        <button class="btn-icon" title="库存管理" onclick="openInventoryModal('PRD202501002')">
                                            <i class="fas fa-boxes"></i>
                                        </button>
                                        <div class="dropdown">
                                            <button class="btn-icon dropdown-toggle" title="更多操作">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a href="#" class="dropdown-item">复制产品</a>
                                                <a href="#" class="dropdown-item">产品推荐</a>
                                                <a href="#" class="dropdown-item">销售报告</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="#" class="dropdown-item text-red">删除产品</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            
                            <tr class="product-row">
                                <td>
                                    <input type="checkbox" class="form-checkbox product-checkbox" value="PRD202501003">
                                </td>
                                <td class="product-image">
                                    <img src="../../../shared/assets/product-sample.jpg" alt="产品图片" class="product-thumb">
                                </td>
                                <td class="product-info">
                                    <div class="product-name">泰国曼谷芭提雅6日游</div>
                                    <div class="product-code">PRD202501003</div>
                                    <div class="product-subtitle">大皇宫+水上市场+芭提雅海滩</div>
                                </td>
                                <td class="product-category">
                                    <span class="category-badge secondary">出境游</span>
                                    <div class="category-detail">东南亚 / 泰国</div>
                                </td>
                                <td class="product-price">
                                    <div class="price-main">¥3,980</div>
                                    <div class="price-detail">成人价</div>
                                </td>
                                <td class="product-inventory">
                                    <div class="inventory-info">
                                        <span class="inventory-number danger">0</span>
                                        <div class="inventory-progress">
                                            <div class="progress-bar">
                                                <div class="progress-fill danger" style="width: 0%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="product-status">
                                    <span class="status-badge danger">已售罄</span>
                                </td>
                                <td class="product-sales">
                                    <div class="sales-number">234人</div>
                                    <div class="sales-trend positive">+28%</div>
                                </td>
                                <td class="product-actions">
                                    <div class="action-buttons">
                                        <button class="btn-icon" title="查看详情" onclick="viewProduct('PRD202501003')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn-icon" title="编辑产品" onclick="editProduct('PRD202501003')">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn-icon" title="价格管理" onclick="openPricingModal('PRD202501003')">
                                            <i class="fas fa-dollar-sign"></i>
                                        </button>
                                        <button class="btn-icon" title="库存管理" onclick="openInventoryModal('PRD202501003')">
                                            <i class="fas fa-boxes"></i>
                                        </button>
                                        <div class="dropdown">
                                            <button class="btn-icon dropdown-toggle" title="更多操作">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu">
                                                <a href="#" class="dropdown-item">复制产品</a>
                                                <a href="#" class="dropdown-item">产品推荐</a>
                                                <a href="#" class="dropdown-item">销售报告</a>
                                                <div class="dropdown-divider"></div>
                                                <a href="#" class="dropdown-item text-red">删除产品</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 批量操作栏 -->
                <div class="batch-actions" id="batchActions" style="display: none;">
                    <div class="batch-info">
                        <span>已选择 <span id="selectedCount">0</span> 个产品</span>
                    </div>
                    <div class="batch-buttons">
                        <button class="btn btn-outline btn-small">批量修改状态</button>
                        <button class="btn btn-outline btn-small">批量调价</button>
                        <button class="btn btn-outline btn-small">批量导出</button>
                        <button class="btn btn-destructive btn-small">批量删除</button>
                    </div>
                </div>
                
                <!-- 分页控件 -->
                <div class="pagination-container">
                    <div class="pagination-info">
                        <span>显示 1-20 条，共 156 条记录</span>
                    </div>
                    <div class="pagination">
                        <button class="btn btn-outline btn-small" disabled>
                            <i class="fas fa-chevron-left"></i>
                            上一页
                        </button>
                        <div class="page-numbers">
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <span class="page-ellipsis">...</span>
                            <button class="page-btn">8</button>
                        </div>
                        <button class="btn btn-outline btn-small">
                            下一页
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <!-- 模态框容器 -->
    <div id="pricing-modal-container"></div>
    <div id="inventory-modal-container"></div>
    <div id="product-form-modal-container"></div>

    <!-- JavaScript -->
    <script src="../../../shared/scripts/modal-loader.js"></script>
    <script src="../scripts/product-management.js"></script>
</body>
</html>